<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<title>销售单据列表</title>
		<link rel="stylesheet" type="text/css" href="css/base.css">
		<link rel="stylesheet" type="text/css" href="css/common.css">
		<link rel="stylesheet" type="text/css" href="js/mui/css/mui.min.css">

		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script src="js/common.js"></script>
		<script type="text/javascript" src="js/mui/js/mui.min.js"></script>

		<style>
			.mui-scroll-wrapper {
				top: 2rem;
			}
			
			.left_name,
			.right_value {
				font-size: 16px;
			}
			
			.left_name {
				float: left;
				width: 30%;
			}
			
			.right_value {
				float: right;
				width: 70%;
			}
			
			.content_line {
				line-height: 40px;
			}
			
			.details-button {
				float: right;
				margin-top: 0.4rem;
				color: #555555;
				font-size: 0.6rem;
			}
			
			.my-order-wait-zf {
				margin-top: 7px;
			}
			
			.my-order-item-tit span {
				float: left;
				font-size: 0.88rem;
			}
			
			.header {
				z-index: 9999;
			}
			
			.reback-button {
				background: #1d1d21;
				height: 1.8rem;
			}
		</style>

	</head>

	<body>
		<header class="header" id="header">
			<button class="reback-button" onclick="javascript:history.go(-1)"><a href="" target=_self class="back">返回</a></button>
			<h1>销售单据列表</h1>
		</header>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron">

				</ul>
				<div class="tag" style="display:block" id="content_body">

					<div class="my-order-item" onclick="bb()">
						<div class="my-order-item-tit clearfix">
							<span>单据编号：888888888</span>
							<span class="my-order-wait-zf">已审</span>
							<button class="details-button" onclick="detail()">查看详情</button>
						</div>
						<div class="my-order-item-txt">
							<div class="content_line">
								<label class="left_name">业务类型：</label>
								<label class="right_value">销售</label>
								<div style="clear: both;"></div>
							</div>
							<div class="content_line">
								<label class="left_name">销售客户：</label>
								<label class="right_value">深圳海信科</label>
								<div style="clear: both;"></div>
							</div>
							<div class="content_line">
								<label class="left_name">仓库：</label>
								<label class="right_value">赛格</label>
								<div style="clear: both;"></div>
							</div>
							<div class="content_line">
								<label class="left_name">时间：</label>
								<label class="right_value">2018-07-13  13:30</label>
								<div style="clear: both;"></div>
							</div>
							<div class="content_line">
								<label class="left_name">经手人：</label>
								<label class="right_value">刘德华</label>
								<div style="clear: both;"></div>
							</div>
						</div>
						<div class="my-order-item-btn">

							<div class="pos-r">
								应收金额：￥2,400.00
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					$("#content_body").prepend("  <div class=\"my-order-item\">" +
						"<div class=\"my-order-item-tit clearfix\" >" +
						"	<span>单据编号：888888888</span>" +
						"<button class=\"details-button\" onclick=\"detail()\">查看详情</button>" +
						" </div>" +
						"<div class=\"my-order-item-txt\">" +
						"	<div class=\"content_line\">" +
						"		<label class=\"left_name\">业务类型：</label>" +
						"	<label class=\"right_value\">销售</label>" +
						"	<div style=\"clear: both;\"></div>" +
						"</div>" +
						"<div class=\"content_line\">" +
						"	<label class=\"left_name\">销售客户：</label>" +
						"	<label class=\"right_value\">深圳海信科</label>" +
						"	<div style=\"clear: both;\"></div>" +
						"</div>" +
						"<div class=\"content_line\">" +
						"	<label class=\"left_name\">仓库：</label>" +
						"<label class=\"right_value\">赛格</label>" +
						"<div style=\"clear: both;\"></div>" +
						"</div>" +
						"<div class=\"content_line\">" +
						"		<label class=\"left_name\">时间：</label>" +
						"	<label class=\"right_value\">2018-07-13  13:30</label>" +
						"	<div style=\"clear: both;\"></div>" +
						"	</div>" +
						"	<div class=\"content_line\">" +
						"		<label class=\"left_name\">经手人：</label>" +
						"	<label class=\"right_value\">刘德华</label>" +
						"	<div style=\"clear: both;\"></div>" +
						"</div>" +
						"</div>" +
						" <div class=\"my-order-item-btn\">" +
						" <div class=\"pos-r\">" +
						"    	应收金额：￥2400" +
						"  </div>  " +
						"  <span class=\"my-order-wait-zf\">已审</span>" +
						" </div>" +
						"</div>");
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 1500);
			}
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					$(",mui-table-view").append("  <div class=\"my-order-item\">" +
						"<div class=\"my-order-item-tit clearfix\" >" +
						"	<span>单据编号：888888888</span>" +
						"<button class=\"details-button\" onclick=\"detail()\">查看详情</button>" +
						" </div>" +
						"<div class=\"my-order-item-txt\">" +
						"	<div class=\"content_line\">" +
						"		<label class=\"left_name\">业务类型：</label>" +
						"	<label class=\"right_value\">销售</label>" +
						"	<div style=\"clear: both;\"></div>" +
						"</div>" +
						"<div class=\"content_line\">" +
						"	<label class=\"left_name\">销售客户：</label>" +
						"	<label class=\"right_value\">深圳海信科</label>" +
						"	<div style=\"clear: both;\"></div>" +
						"</div>" +
						"<div class=\"content_line\">" +
						"	<label class=\"left_name\">仓库：</label>" +
						"<label class=\"right_value\">赛格</label>" +
						"<div style=\"clear: both;\"></div>" +
						"</div>" +
						"<div class=\"content_line\">" +
						"		<label class=\"left_name\">时间：</label>" +
						"	<label class=\"right_value\">2018-07-13  13:30</label>" +
						"	<div style=\"clear: both;\"></div>" +
						"	</div>" +
						"	<div class=\"content_line\">" +
						"		<label class=\"left_name\">经手人：</label>" +
						"	<label class=\"right_value\">刘德华</label>" +
						"	<div style=\"clear: both;\"></div>" +
						"</div>" +
						"</div>" +
						" <div class=\"my-order-item-btn\">" +
						" <div class=\"pos-r\">" +
						"    	应收金额：￥2400" +
						"  </div>  " +
						"  <span class=\"my-order-wait-zf\">已审</span>" +
						" </div>" +
						"</div>");
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2));
				}, 1500);
			}
			if(mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 1000);
				});
			} else {
				mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				});
			}

			mui('.mui-table-view').on('tap', '.my-order-item', function() {
				alert("sdfsd");

				// 暂时禁止滚动
				mui('#pullrefresh').pullRefresh().setStopped(true);
			})

			mui('body').on('tap', '.mui-backdrop', function() {
				// 取消暂时禁止滚动
				mui('#pullrefresh').pullRefresh().setStopped(false);
			})
			mui('body').on('tap', '.mui-dtpicker-header', function(e) {
				var target = e.target;
				if(target.tagName === 'BUTTON') {
					// 取消暂时禁止滚动
					mui('#pullrefresh').pullRefresh().setStopped(false);
				}
			})

			function detail() {
				location.href = "setting.html";
			}

			function bb() {
				alert("sdfsdf");
			}
		</script>
	</body>

</html>